<template>

    <el-tooltip  content="下载" placement="top">
      <el-button link icon="Download" type="primary" @click="downLoad(row)"> 多文件逐个下载</el-button>
    </el-tooltip>
  </template>
  
  
  
  <script setup>
  import { ref } from 'vue'
  
  const linkArray = ref([
    "https://cdn.pixabay.com/photo/2024/11/26/18/50/skyscraper-9226515_1280.jpg",
    "https://cdn.pixabay.com/photo/2024/12/03/19/02/christmas-9242826_640.jpg",
    "https://cdn.pixabay.com/photo/2024/12/03/01/41/copy-space-9241065_640.jpg",
    "https://cdn.pixabay.com/photo/2024/11/25/17/47/ai-generated-9223788_640.jpg"
  ]);
  
  // 下载方法
  const downLoad = async () => {
    // 逐个下载文件
    for (let index = 0; index < linkArray.value.length; index++) {
      try {
        // 使用 fetch 获取文件
        const response = await fetch(linkArray.value[index]);
        const blob = await response.blob();
        
        // 创建下载链接
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '文件' + '_' + (index + 1);
        
        // 触发下载
        document.body.appendChild(a);
        a.click();
        
        // 清理
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
        
        // 添加小延迟，避免浏览器限制
        await new Promise(resolve => setTimeout(resolve, 500));
      } catch (error) {
        console.error(`下载文件 ${index + 1} 失败:`, error);
      }
    }
  };
  </script>